import React, {Component} from 'react';
import Detail from "./Detail/Detail";
import {Link, Route} from "react-router-dom";

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'},
        ]
    }

    replaceShow = (id, title) => {
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)

        // this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)

        this.props.history.replace(`/home/message/detail`, {id, title})
    }
    pushShow = (id, title) => {
        // this.props.history.push(`/home/message/detail/${id}/${title}`)

        // this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)

        this.props.history.push(`/home/message/detail`, {id, title})
    }

    back = () => {
        this.props.history.goBack()
    }
    forward = () => {
        this.props.history.goForward()
    }
    go = () => {
        this.props.history.go(2)
    }


    render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map((msgObj) => {
                            return (
                                <li key={msgObj.id}>
                                    {/*<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>*/}
                                    {/*<Link*/}
                                    {/*    to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>*/}
                                    <Link to={{
                                        pathname: '/home/message/detail',
                                        state: {id: msgObj.id, title: msgObj.title}
                                    }}>{msgObj.title}</Link>


                                    &nbsp;&nbsp;
                                    <button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                                    &nbsp;&nbsp;
                                    <button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看
                                    </button>
                                </li>
                            )
                        })
                    }
                </ul>

                <hr></hr>
                {/*<Route path="/home/message/detail/:id/:title" component={Detail}></Route>*/}
                {/*<Route path="/home/message/detail" component={Detail}></Route>*/}
                <Route path="/home/message/detail" component={Detail}></Route>

                <button onClick={this.back}>回退</button>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.go}>go</button>
            </div>
        );
    }
}

export default Message;